{% extends 'layout/main.html' %}

{% block main %}

<div id="main" class="main-container container">


    <div class="row">
        <div class="col-md-9">
            <div class="topics panel panel-default">
                <div class="panel-heading clearfix">
                    <div class="filter pull-right">
                        <span class="l">查看:</span>
                        <a href="/topics" class=active>默认</a> /
                        <a href="/topics/popular" class="popular"><i class="fa fa-diamond"></i> 优质帖子</a> /
                        <a href="/topics/no_reply">无人问津</a> /
                        <a href="/topics/last">最新创建</a>
                    </div>

                </div>

                <div class="panel-body">
                    {% for topic in topic_list.list %}

                   <div class="topic media topic-28130">
                        <div class="avatar media-left">
                            <a href="/runajiang">
                                <img class="media-object avatar-48"
                                                      src="https://ruby-china-files.b0.upaiyun.com/user/large_avatar/19215.jpg"
                                                      alt="19215"/>
                            </a>
                        </div>
                        <div class="infos media-body">
                            <div class="title media-heading">
                                <a title="{{topic.title}}" href="/topics/{{topic.id}}">{{topic.title}}</a>
                                <i class="fa fa-thumb-tack" title="置顶"></i>

                            </div>
                            <div class="info">
                                <a class="node" href="/topics/node57">线下活动</a>
                                •
                                <a data-name="Runa" href="/runajiang">runajiang</a>
      <span class="hidden-mobile">
      •
        最后由 <a data-name="ginchenorlee" href="/ginchenorlee">ginchenorlee</a> 于 <abbr class="timeago"
                                                                                      title="2015-12-05T20:57:32+08:00"></abbr>回复
      </span>
                            </div>
                        </div>
                        <div class="count media-right">
                            <a class="state-false" href="/topics/28130#reply19">19</a>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                {% if topic_list.page.pages > 1 %}
                <div class="panel-footer clearfix">
                    {{ topic_list.page|pagination(request.uri) }}
                    <!--
                    <ul class="pagination">
                        <li class="prev previous_page disabled"><a href="#">&#8592; 上一页</a></li>
                        <li class="active"><a rel="start" href="/topics?page=1">1</a></li>
                        <li><a rel="next" href="/topics?page=2">2</a></li>
                        <li><a href="/topics?page=3">3</a></li>
                        <li><a href="/topics?page=4">4</a></li>
                        <li><a href="/topics?page=5">5</a></li>
                        <li class="disabled"><a href="#">&hellip;</a></li>
                        <li><a href="/topics?page=68">68</a></li>
                        <li><a href="/topics?page=69">69</a></li>
                        <li class="next next_page "><a rel="next" href="/topics?page=2">下一页 &#8594;</a></li>
                    </ul>-->
                </div>
                {% endif %}
            </div>


            <div id="sections" class="panel panel-default">
                <div class="panel-heading">讨论节点分类导航</div>
                <!--
                <div class="panel-body">
                    <div class="row node-list">
                        <div class="node media">
                            <label class="media-left">Ruby</label>
        <span class="nodes media-body">
              <span class="name"><a title="Ruby" href="/topics/node1">Ruby</a></span>
              <span class="name"><a title="Rails" href="/topics/node2">Rails</a></span>
              <span class="name"><a title="Gem" href="/topics/node3">Gem</a></span>
              <span class="name"><a title="重构" href="/topics/node29">重构</a></span>
              <span class="name"><a title="Testing" href="/topics/node37">Testing</a></span>
              <span class="name"><a title="Sinatra" href="/topics/node43">Sinatra</a></span>
              <span class="name"><a title="部署" href="/topics/node44">部署</a></span>
              <span class="name"><a title="开源项目" href="/topics/node47">开源项目</a></span>
              <span class="name"><a title="mRuby" href="/topics/node66">mRuby</a></span>
              <span class="name"><a title="新手问题" href="/topics/node52">新手问题</a></span>
              <span class="name"><a title="JRuby" href="/topics/node54">JRuby</a></span>
              <span class="name"><a title="RVM/Rbenv" href="/topics/node45">RVM/Rbenv</a></span>
        </span>
                        </div>
                        <div class="node media">
                            <label class="media-left">Front-End</label>
        <span class="nodes media-body">
              <span class="name"><a title="CSS" href="/topics/node41">CSS</a></span>
              <span class="name"><a title="AngularJS" href="/topics/node71">AngularJS</a></span>
              <span class="name"><a title="ReactJS" href="/topics/node72">ReactJS</a></span>
              <span class="name"><a title="EmberJS" href="/topics/node73">EmberJS</a></span>
              <span class="name"><a title="JavaScript" href="/topics/node5">JavaScript</a></span>
        </span>
                        </div>
                        <div class="node media">
                            <label class="media-left">Back-End</label>
        <span class="nodes media-body">
              <span class="name"><a title="MongoDB" href="/topics/node9">MongoDB</a></span>
              <span class="name"><a title="Redis" href="/topics/node10">Redis</a></span>
              <span class="name"><a title="Git" href="/topics/node11">Git</a></span>
              <span class="name"><a title="Database" href="/topics/node12">Database</a></span>
              <span class="name"><a title="Linux" href="/topics/node17">Linux</a></span>
              <span class="name"><a title="Nginx" href="/topics/node18">Nginx</a></span>
              <span class="name"><a title="搜索分词" href="/topics/node39">搜索分词</a></span>
              <span class="name"><a title="算法" href="/topics/node40">算法</a></span>
              <span class="name"><a title="Mailer" href="/topics/node46">Mailer</a></span>
              <span class="name"><a title="运维" href="/topics/node55">运维</a></span>
              <span class="name"><a title="安全" href="/topics/node60">安全</a></span>
              <span class="name"><a title="云服务" href="/topics/node20">云服务</a></span>
        </span>
                        </div>
                        <div class="node media">
                            <label class="media-left">Mobile</label>
        <span class="nodes media-body">
              <span class="name"><a title="iOS" href="/topics/node32">iOS</a></span>
              <span class="name"><a title="Android" href="/topics/node33">Android</a></span>
              <span class="name"><a title="RubyMotion" href="/topics/node74">RubyMotion</a></span>
        </span>
                        </div>
                        <div class="node media">
                            <label class="media-left">分享</label>
        <span class="nodes media-body">
              <span class="name"><a title="健康" href="/topics/node63">健康</a></span>
              <span class="name"><a title="工具控" href="/topics/node24">工具控</a></span>
              <span class="name"><a title="求职" href="/topics/node64">求职</a></span>
              <span class="name"><a title="分享" href="/topics/node26">分享</a></span>
              <span class="name"><a title="瞎扯淡" href="/topics/node27">瞎扯淡</a></span>
              <span class="name"><a title="其他" href="/topics/node28">其他</a></span>
              <span class="name"><a title="产品控" href="/topics/node30">产品控</a></span>
              <span class="name"><a title="书籍" href="/topics/node38">书籍</a></span>
              <span class="name"><a title="Mac" href="/topics/node42">Mac</a></span>
              <span class="name"><a title="插画 / 设计" href="/topics/node50">插画 / 设计</a></span>
              <span class="name"><a title="数学" href="/topics/node53">数学</a></span>
              <span class="name"><a title="创业" href="/topics/node56">创业</a></span>
              <span class="name"><a title="移民" href="/topics/node62">移民</a></span>
              <span class="name"><a title="翻译" href="/topics/node68">翻译</a></span>
              <span class="name"><a title="产品推广" href="/topics/node69">产品推广</a></span>
              <span class="name"><a title="招聘" href="/topics/node25">招聘</a></span>
        </span>
                        </div>
                        <div class="node media">
                            <label class="media-left">Languages</label>
        <span class="nodes media-body">
              <span class="name"><a title="Python" href="/topics/node4">Python</a></span>
              <span class="name"><a title="Rust" href="/topics/node70">Rust</a></span>
              <span class="name"><a title="Go" href="/topics/node34">Go</a></span>
              <span class="name"><a title="Node.js" href="/topics/node75">Node.js</a></span>
              <span class="name"><a title="Obj-C" href="/topics/node48">Obj-C</a></span>
              <span class="name"><a title="Clojure" href="/topics/node58">Clojure</a></span>
              <span class="name"><a title="Haskell" href="/topics/node59">Haskell</a></span>
              <span class="name"><a title="Swift" href="/topics/node67">Swift</a></span>
              <span class="name"><a title="Erlang/Elixir" href="/topics/node35">Erlang/Elixir</a></span>
        </span>
                        </div>
                        <div class="node media">
                            <label class="media-left">Ruby China</label>
        <span class="nodes media-body">
              <span class="name"><a title="公告" href="/topics/node21">公告</a></span>
              <span class="name"><a title="反馈" href="/topics/node22">反馈</a></span>
              <span class="name"><a title="社区开发" href="/topics/node23">社区开发</a></span>
              <span class="name"><a title="NoPoint" href="/topics/node61">NoPoint</a></span>
        </span>
                        </div>
                        <div class="node media">
                            <label class="media-left">活动</label>
        <span class="nodes media-body">
              <span class="name"><a title="RubyTuesday" href="/topics/node31">RubyTuesday</a></span>
              <span class="name"><a title="RubyConf" href="/topics/node51">RubyConf</a></span>
              <span class="name"><a title="线下活动" href="/topics/node57">线下活动</a></span>
        </span>
                        </div>
                    </div>
                    -->
                </div>
            </div>


            <div class="panel panel-default">
                <!--
                <div class="panel-heading">热门城市</div>
                <div class="panel-body location-list" style="text-align:center;">
                    <span class="name"><a href="/users/city/%E5%8C%97%E4%BA%AC">北京</a></span>
                    <span class="name"><a href="/users/city/%E4%B8%8A%E6%B5%B7">上海</a></span>
                    <span class="name"><a href="/users/city/%E6%9D%AD%E5%B7%9E">杭州</a></span>
                    <span class="name"><a href="/users/city/%E6%88%90%E9%83%BD">成都</a></span>
                    <span class="name"><a href="/users/city/%E6%B7%B1%E5%9C%B3">深圳</a></span>
                    <span class="name"><a href="/users/city/%E5%B9%BF%E5%B7%9E">广州</a></span>
                    <span class="name"><a href="/users/city/%E5%8D%97%E4%BA%AC">南京</a></span>
                    <span class="name"><a href="/users/city/%E8%A5%BF%E5%AE%89">西安</a></span>
                    <span class="name"><a href="/users/city/%E6%AD%A6%E6%B1%89">武汉</a></span>
                    <span class="name"><a href="/users/city/%E5%A4%A7%E8%BF%9E">大连</a></span>
                    <span class="name"><a href="/users/city/%E9%87%8D%E5%BA%86">重庆</a></span>
                    <span class="name"><a href="/users/city/%E5%8E%A6%E9%97%A8">厦门</a></span>
                </div>
            </div>
            -->
        </div>


        <div class="sidebar col-md-3">

            <div class="panel panel-default clearfix">
      <div class="panel-body">
        <div class="btn-group pull-left">
          <a href="/topics/new" class="btn btn-primary">发布新话题</a>
          <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
              <li>
                <a href="/topics/new?node=3">Gem</a>
              </li>
              <li>
                <a href="/topics/new?node=24">工具控</a>
              </li>
              <li>
                <a href="/topics/new?node=27">瞎扯淡</a>
              </li>
              <li>
                <a href="/topics/new?node=44">部署</a>
              </li>
              <li>
                <a href="/topics/new?node=52">新手问题</a>
              </li>
          </ul>
        </div>

        <a href="https://ruby-china.org/topics/feed" target="_blank" class="pull-right feed-button btn btn-default" title="订阅 Ruby China 社区新话题"><span></span> RSS</a>
      </div>
    </div>

            <div class="panel panel-default">
                <div class="panel-heading">小帖士</div>
                <div class="panel-body">
                    如果你想寻找 Ruby 的三方库，请上 rubygems.org 或在 github.com 上面寻找。
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">友情社区</div>
                <ul class="list-group" style="text-align:center">
                    <li class="list-group-item" style="display:none"><a href="http://python-china.org" target="_blank"
                                                                        rel="nofollow" title="Python China 社区"><img
                            src="//ruby-china-files.b0.upaiyun.com/photo/25e6c754403099b489ab68bcd21ca32d.jpg"
                            style="width:120px;"/></a></li>
                    <li class="list-group-item"><a href="http://cnodejs.org" rel="nofollow" title="CNode 社区"
                                                   target="_blank"><img
                            src="//ruby-china-files.b0.upaiyun.com/assets/cnodejs.png"
                            style="width:120px;margin: 4px 0;"/></a></li>
                    <li class="list-group-item" style="display:none"><a href="http://f2e.im" target="_blank"
                                                                        rel="nofollow" title="F2E 前端社区"><img
                            src="//ruby-china-files.b0.upaiyun.com/photo/d17f84604f177a8148bc60c39d160398.png"
                            style="width:120px;"/></a></li>
                    <li class="list-group-item" style="display:none"><a href="http://swift.sh" rel="nofollow"
                                                                        title="Swift 中文社区" target="_blank"><img
                            src="https://ruby-china-files.b0.upaiyun.com/assets/swift_sh.png" style="width:120px;"/></a>
                    </li>
                    <li class="list-group-item"><a href="http://golangtc.com/" rel="nofollow" title="Golang 中国"
                                                   target="_blank"><img
                            src="//ruby-china-files.b0.upaiyun.com/photo/2014/ace251f3e20ff4eb81a30f61d110d87e.png"
                            style="width:120px; margin:6px 0;"/></a></li>
                    <li class="list-group-item"><a href="http://phphub.org" target="_blank" rel="nofollow"><img
                            src="//ruby-china-files.b0.upaiyun.com/photo/2014/6f64d01b427175a24be9481fcac9b63a.png"
                            style="width:120px; margin: 6px 0;"/></a></li>
                    <li class="list-group-item"><a href="http://segmentfault.com" target="_blank" rel="nofollow"><img
                            src="//ruby-china-files.b0.upaiyun.com/photo/2014/bc0ad4d10d5b9cd606c4b8180eb7e4bb.png"
                            style="width:120px; margin: 6px 0;"/></a></li>
                    <li class="list-group-item"><a href="http://elixir-cn.com" target="_blank" rel="nofollow"><img
                            src="//ruby-china-files.b0.upaiyun.com/photo/2015/f65fb5a10d3392a1db841c85716dd8f6.png"
                            style="width: 120px; margin: 0px 0;"/></a></li>
                    <li class="list-group-item"><a href="http://ionichina.com/" target="_blank" rel="nofollow"><img
                            src="//ruby-china-files.b0.upaiyun.com/photo/2015/63aba221c446d3e65b83acf37658a129.png"
                            style="width: 120px; margin: 0px 0;"/></a></li>
                    <li class="list-group-item"><a href="https://testerhome.com/" target="_blank" rel="nofollow"><img
                            src="//ruby-china-files.b0.upaiyun.com/photo/2015/d148d71bcf051576f0211feff7f6588c.png"
                            style="width: 120px; margin: 6px 0;"/></a></li>
                </ul>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">推荐 Ruby 资源</div>
                <ul class="list-group">
                    <li class="list-group-item"><a href="http://railscasts-china.com/" target="_blank" rel="nofollow">Rails
                        视频教程</a></li>
                    <li class="list-group-item"><a href="https://ruby.taobao.org" target="_blank" rel="nofollow">RubyGems
                        淘宝镜像</a></li>
                    <li class="list-group-item"><a href="http://guides.ruby-china.org">Rails Guides 中文版</a></li>
                </ul>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">统计信息</div>
                <ul class="list-group">
                    <li class="list-group-item">社区会员: 23830 人</li>
                    <li class="list-group-item">帖子数: 28289 个</li>
                    <li class="list-group-item">回帖数: 282202 条</li>
                </ul>
            </div>

        </div>

    </div>

</div>

{% endblock %}

